<template>
	<view>
		<u-navbar title="申请发票" @rightClick="rightClick" :fixed="false" :autoBack="true">
		</u-navbar>
		<view style="padding: 40rpx;">


			<view class="box" v-for="(item,index) in arr" :key="index" v-if="item.is_kaipiao == 0">
				<view class="hz">
					<view class="left">
						<image class="change" v-if="index == number"
							src="http://qiniu.suboshimuying.cn/static/cart/check.png"
							@click="itemChange(index,item.id)">
						</image>
						<image class="change" v-else src="http://qiniu.suboshimuying.cn/static/order/icon24@2x.png"
							@click="itemChange(index,item.id)">
						</image>
					</view>
					<view class="right">
						<view class="bianhao">订单编号：{{item.order_no}}</view>
						<view class="lis">
							<view class="l">
								<view style="display: flex;align-items: center;"><img
										:src="item.goodslist[0].goods_image" alt=""
										style="width: 120rpx;height: 120rpx;">
									<view style="margin-left: 15rpx;">{{item.goodslist[0].goods_name}}</view>
								</view>

								<view style="padding-right: 22rpx;text-align: center;">
									x{{item.goodslist.length}}件
									<view style="font-size: 20rpx;color: #3e3e3e99;">共{{item.goodslist.length}}件</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			下一步
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [1, 2],
				number: null,
				id: ''
			}
		},
		async onLoad() {
			let res = await this.$api.getOrderList({
				type: 1,
				status: 7
			})
			this.arr = res.data.data
		},
		methods: {
			submit() {
				if (!this.id) {
					uni.showModal({
						content: '请先选择要申请发票的商品！'
					})
					return
				}
				uni.navigateTo({
					url: `/subPages/invoice/invoice?id=${this.id}`
				})
			},
			itemChange(v, id) {
				this.id = id
				this.number = v
			},
			// itemChange(v,b) {
			// 	this.number = v
			// },


		}
	}
</script>

<style>
	page {
		background-color: rgb(247, 248, 253);
	}

	.btn {
		position: fixed;
		bottom: 20rpx;
		background-color: rgb(0, 0, 0);
		width: 600rpx;
		color: #fff;
		line-height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		left: 50%;
		transform: translateX(-50%);

	}

	.bianhao {
		font-size: 24rpx;
		color: #e3e3e3;
	}

	.change {
		width: 40rpx;
		height: 40rpx;
	}

	.btn.active {
		background-color: blue;
	}

	.left {
		flex: 1;
		text-align: center;
	}

	.right {

		flex: 5;
	}

	.right .lis {
		margin-top: 20rpx;
	}

	.right .lis .l {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		justify-content: space-between
	}

	.right .lis img {
		border-radius: 10rpx;
	}

	.box {
		padding: 20rpx 0;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}

	.hz {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>